<template>
	<view class="profit">
		<view class="list">
			<view class="listtext" v-for='(item,index) in list' :key='index'>
				<text class="text" :class="{active:index==inActive}" @click="selection(index,item.name)">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				list: [{
						'name': "入金"
					},
					{
						'name': "获利"
					},
					{
						'name': "推荐"
					},
				],
				inActive: '0',
			}
		},
		onLoad: function() {

		},
		methods: {
			
			selection(index, number) {
				this.inActive = index;

			},

		}
	}
</script>

<style lang="less">
	.profit {
		width: 100%;
		display: flex;
		flex-direction: column;

		.list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: flex-start;
			border-bottom: 5px solid #F1F1F1;


			.listtext {
				flex: 1;
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {

					width: 70%;
					padding: 10upx 0;
					text-align: center;
					color: #24435D;
					font-size: 16px;

				}

				.active {
					background-color: #1D7BFF;
					color: #FFF;
				}
			}
		}
	}
</style>
